Custom Elementの型定義をPreactに追加できない
問題のコード
code:component.tsx
/// <reference no-default-lib="true"/>
/// <reference lib="esnext"/>
/// <reference lib="dom"/>
/** @jsx h */
/** @jsxFrag Fragment */
import {
Fragment,
FunctionalComponent,
h,
function DropDown() {
return (
<>
<style>
{`
:host {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
max-width: 50vw;
max-height: 80vh;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
font-weight: normal;
line-height: 28px;
text-align: left;
color: var(--dropdown-text-color, #333); background-color: var(--dropdown-bg, #fff); border: 1px solid var(--dropdown-border-color, rgba(0,0,0,0.15));
border-radius: 4px;
box-shadow: 0 6px 12px var(--dropdown-shadow-color, rgba(0,0,0,0.175));
background-clip: padding-box;
white-space: nowrap;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
`}
</style>
<slot />
</>
);
}
register(DropDown, "dropdown-container", [], { shadow: true });
const DropDownComponent: FunctionalComponent = (props) =>
code:component.tsx
// @ts-ignore: failed to make the type definition
<dropdown-container {...props}></dropdown-container>;
export { DropDownComponent as DropDown };
だめだったもの
code:ts
/// <reference no-default-lib="true"/>
/// <reference lib="esnext"/>
/// <reference lib="dom"/>
/** @jsx h */
export namespace JSX {
interface IntrinsicElements {
"dropdown-container": h.JSX.HTMLAttributes<HTMLElement>;
}
}
code:ts
/// <reference no-default-lib="true"/>
/// <reference lib="esnext"/>
/// <reference lib="dom"/>
/** @jsx h */
declare global {
namespace JSX {
interface IntrinsicElements {
"dropdown-container": h.JSX.HTMLAttributes<HTMLElement>;
}
}
}
Reference